<template>
  <view class="container">
    <!-- 顶部卡片 -->
    <view class="info-card">
      <view class="apartment-name">{{ apartmentName }}</view>
      <view class="register-time">登记时间: {{ registerTime }}</view>
      <view class="status-tag" :class="'status-' + status">{{ statusText }}</view>
    </view>

    <!-- 承租人信息 -->
    <view class="section" v-if="tenant">
      <view class="section-header">
        <text class="section-title">承租人信息</text>
      </view>
      <view class="person-info">
        <view class="avatar-container">
          <image class="avatar" :src="tenant.picUrl" mode="aspectFill"></image>
        </view>
        <view class="info-content">
          <view class="info-item">
            <text class="label">房客类型</text>
            <text class="value">{{ tenant.renterType === '1' ? '省内' : '省外' }}</text>
          </view>
          <view class="info-item">
            <text class="label">姓名</text>
            <text class="value">{{ tenant.name }}</text>
          </view>
          <view class="info-item">
            <text class="label">联系方式</text>
            <text class="value">{{ tenant.contacts }}</text>
          </view>
          <view class="info-item">
            <text class="label">身份证</text>
            <text class="value">{{ tenant.idCardNumber }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 同住人信息 -->
    <view class="section" v-if="cohabitants && cohabitants.length">
      <view class="section-header">
        <text class="section-title">同住人信息</text>
        <text class="count-badge">{{ cohabitants.length }}人</text>
      </view>
      <view class="person-info" v-for="(cohabitant, index) in cohabitants" :key="index">
        <view class="avatar-container">
          <image class="avatar" :src="cohabitant.picUrl" mode="aspectFill"></image>
        </view>
        <view class="info-content">
          <view class="info-item">
            <text class="label">姓名</text>
            <text class="value">{{ cohabitant.name }}</text>
          </view>
          <view class="info-item">
            <text class="label">联系方式</text>
            <text class="value">{{ cohabitant.contacts }}</text>
          </view>
          <view class="info-item">
            <text class="label">身份证</text>
            <text class="value">{{ cohabitant.idCardNumber }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer" v-if="status === 0">
      <button class="cancel-btn" @click="cancelRegistration">取消预登记</button>
    </view>
  </view>
</template>

<script>
import { cancelPreCheckIn, preCheckInDetail } from '@/api/preCheckIn'
import { isNotEmpty } from '@/utils'

export default {
  data() {
    return {
      apartmentName: '',
      registerTime: '',
      tenant: null,
      cohabitants: [],
      status: null,
      registerId: '',
    };
  },
  computed: {
    statusText() {
      switch (this.status) {
        case '0':
          return '待审核';
        case '1':
          return '审核通过';
        case '2':
          return '审核驳回';
        case '4':
          return '办理入住成功';
        default:
          return '未知状态';
      }
    },
  },
  methods: {
    fetchDetails() {
      // 调用接口获取详情
      preCheckInDetail(this.registerId)
        .then(response => {
          const data = response.data;
          if (isNotEmpty(data.room)) {
            const buildingName = isNotEmpty(data.room.buildingName) ? data.room.buildingName : ''
            const name = isNotEmpty(data.room.name) ? data.room.name : ''
            const fullName = buildingName + name
            this.apartmentName = isNotEmpty(fullName) ? fullName : '暂未登记房间'
          } else {
            this.apartmentName = '暂未登记房间'
          }
          this.registerTime = data.createTime;
          this.status = data.status;
          this.tenant = data.renterList.find(t => t.mainFlag === '1');
          this.cohabitants = data.renterList.filter(t => t.mainFlag === '2');
        });
    },
    cancelRegistration() {
      uni.showModal({
        title: '确认取消',
        content: '确定要取消此预登记申请吗？',
        success: (res) => {
          if (res.confirm) {
            cancelPreCheckIn(this.registerId).then(() => {
              uni.showToast({
                title: '取消成功',
                icon: 'success'
              });
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            }).catch(() => {
              uni.showToast({
                title: '取消失败',
                icon: 'none'
              });
            });
          }
        }
      });
    },
  },
  onLoad(options) {
    this.registerId = options.registerId;
    this.fetchDetails();
  },
};
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.info-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.apartment-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.register-time {
  font-size: 26rpx;
  color: #666;
}

.status-tag {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  padding: 6rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}

.status-0 {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-1 {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-2 {
  background-color: #fff2e8;
  color: #fa541c;
}

.status-4 {
  background-color: #f9f0ff;
  color: #722ed1;
}

.section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.count-badge {
  margin-left: 20rpx;
  font-size: 24rpx;
  color: #1890ff;
  background-color: #e6f7ff;
  padding: 2rpx 12rpx;
  border-radius: 20rpx;
}

.person-info {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.person-info:last-child {
  border-bottom: none;
}

.avatar-container {
  width: 120rpx;
  height: 120rpx;
  margin-right: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: #f0f0f0;
}

.info-content {
  flex: 1;
}

.info-item {
  display: flex;
  margin-bottom: 10rpx;
}

.label {
  width: 140rpx;
  color: #888;
  font-size: 28rpx;
}

.value {
  flex: 1;
  color: #333;
  font-size: 28rpx;
}

.footer {
  padding: 40rpx 0;
}

.cancel-btn {
  width: 90%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  background-color: #ff4d4f;
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  margin: 0 auto;
}
</style>
